<template>
  <div>
    <div class="table-header">
      <el-button type="primary" :icon="Plus">添加</el-button>
    </div>
    <el-table border :data="permissionDatas" v-loading="loadding">
      <el-table-column prop="id" label="编号" align="center" width="100px"></el-table-column>
      <el-table-column prop="permissionName" align="center" label="权限"></el-table-column>
      <el-table-column prop="description" label="描述" align="center"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <el-button type="primary" :icon="Edit">编辑</el-button>
        <el-button type="danger" :icon="Delete">删除</el-button>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <pagination layout="prev, pager, next" :total="PaginationConfig.total" :page="PaginationConfig.pageNum"
                  :limit="PaginationConfig.limit"
                  @pagination="UpdatePage"></pagination>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {GetPermissionList} from "@/api/Permission";
import Pagination from '@/components/Pagination/index.vue'
import {Plus, Delete, Edit} from '@element-plus/icons-vue'

const loadding = ref(true);
const permissionDatas = ref([]);
const PaginationConfig = reactive({
  total: 0,
  limit: 5,
  pageNum: 1,
  pageSize: 10
});
onMounted(() => {
  GetPermissionListHandler();
})

function GetPermissionListHandler() {
  GetPermissionList(PaginationConfig.pageNum, PaginationConfig.pageSize).then(response => {
    permissionDatas.value = response.rows;
    PaginationConfig.total = response.total;

    setInterval(() => {
      loadding.value = false;
    }, 1000);
  })
}

function UpdatePage(args) {
  loadding.value = true
  PaginationConfig.pageNum = args.page;
  GetPermissionListHandler();
}

</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: right;
  padding-bottom: 20px;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>